<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>商品排行榜</title>
		<link rel="stylesheet" href="style.css" />
	</head>
	<body>
		<div class="container">
			<header>
				<h1>商品排行榜</h1>
				<div class="tabs">
					<div class="tab active">综合榜</div>
					<div class="tab">热卖榜</div>
					<div class="tab">热评榜</div>
					<div class="tab">热搜榜</div>
				</div>
				<div class="categories">
					<div class="category active">全部</div>
					<div class="category">国内</div>
					<div class="category">海淘</div>
					<div class="category">3C家电</div>
					<div class="category">食品家居</div>
				</div>
			</header>

			<main class="ranking-list">
				<div class="item">
					<div class="rank top1">1</div>
					<img src="images/bracelet.JPG" alt="商品名称" class="item-image" />
					<div class="item-info">
						<div class="item-title">
							新品发售 : Nubia 努比亚 GaN 氮化镓充电器 120W 单C口 快充套装
						</div>
						<div class="item-price">259元（包邮、需用券）</div>
						<div class="item-source">天猫精选</div>
						<div class="item-stats">
							<div class="stat">评论 98</div>
							<div class="stat">值率 23%</div>
						</div>
						<div class="reason">
							<strong>入选理由：</strong
							>最高120W输出，标配6A快充数据线，兼容多种协议。
						</div>
					</div>
				</div>

				<div class="item">
					<div class="rank top2">2</div>
					<img src="images/phone.JPG" alt="商品名称" class="item-image" />
					<div class="item-info">
						<div class="item-title">HUAWEI 华为 Mate 40 5G手机 8GB+128GB</div>
						<div class="item-price">4999元包邮</div>
						<div class="item-source">天猫精选</div>
						<div class="item-stats">
							<div class="stat">评论 53</div>
							<div class="stat">值率 23%</div>
						</div>
						<div class="reason">
							<strong>入选理由：</strong
							>超感知徕卡电影影像，有线无线双超级快充。
						</div>
					</div>
				</div>

				<div class="item">
					<div class="rank top3">3</div>
					<img src="images/tv.JPG" alt="商品名称" class="item-image" />
					<div class="item-info">
						<div class="item-title">
							促销活动 : 京东 再不买就没有了 特惠图书专场
						</div>
						<div class="item-price">49元/7件</div>
						<div class="item-source">京东</div>
						<div class="item-stats">
							<div class="stat">评论 17</div>
							<div class="stat">值率 86%</div>
						</div>
						<div class="reason"><strong>入选理由：</strong>低至7元每件。</div>
					</div>
				</div>

				<div class="item">
					<div class="rank">4</div>
					<img src="images/sku-4.jpg" alt="商品名称" class="item-image">
					<div class="item-info">
						<div class="item-title">
							SK-II大红瓶面霜肌源修护精华霜淡保湿淡化滋润 80g/瓶
						</div>
						<div class="item-price">678.3元（包邮包税，需用券）</div>
						<div class="item-source">天猫国际</div>
						<div class="item-stats">
							<div class="stat">评论 98</div>
							<div class="stat">值率 67%</div>
						</div>
						<div class="reason">
							<strong>入选理由：</strong>SKII家与神仙水同一系列的经典爆款。
						</div>
					</div>
				</div>

				<div class="item">
					<div class="rank">5</div>
					<img src="images/sku-2.jpg" alt="商品名称" class="item-image">
					<div class="item-info">
						<div class="item-title">
							Apple 苹果 iPad Air 4 10.9英寸 平板电脑 64GB WLAN
						</div>
						<div class="item-price">3999元包邮</div>
						<div class="item-source">拼多多</div>
						<div class="item-stats">
							<div class="stat">评论 285</div>
							<div class="stat">值率 86%</div>
						</div>
						<div class="reason">
							<strong>入选理由：</strong>A14 芯片，升级全面屏设计。
						</div>
					</div>
				</div>
			</main>
		</div>
	</body>
</html>
